<template>
  <div class="pagination">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="currentChange"
      :current-page="currentPage"
      background
      :page-sizes="[15, 30, 50, 100, 150, 200]"
      :page-size="pageSize"
      :hide-on-single-page="total===0"
      :pager-count="pagerCount"
      layout=" prev, pager, next, sizes, jumper,slot,total"
      :total="total"
    >
      <i :class="[refresh? 'el-icon-refresh go pagerIcon' : 'el-icon-refresh pagerIcon']" @click="hanleRefresh"></i>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "pagination",
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize:{
      type: Number,
      default: 15
    },
    total: {
      type: Number,
      default: 0
    },
    pagerCount: {
      type: Number,
      default: 7
    }
  },
  data() {
    return {
      refresh:false  // 刷新小动画
    };
  },
  mounted() {
    this.changeJumperText();
  },
  methods: {
     // 更改组件"前往"，改为"跳至"
    changeJumperText(){
       let dom = document.getElementsByClassName(
      "el-pagination__jump"
    )[0]
    if(dom){
    dom.childNodes[0].nodeValue = "跳至";
    }
    },
    // 处理分页容量修改
    handleSizeChange(value) {
      this.$emit("size-change", value);
    },
    currentChange(value) {
      this.$emit("current-change", value);
    },
    // 处理刷新
    hanleRefresh() {
      this.refresh = !this.refresh;
		setTimeout(() => {
			this.refresh = !this.refresh;
		},1000)
      this.$emit("refresh", true);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-pagination {
  font-size: 12px !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #637280;
  margin-top: 10px;
  padding-left: 0;
  padding-right: 0;
}
.pagerIcon {
  font-size: 18px;
  color: #c6ccd1;
  cursor: pointer;
  margin-top: 5px;
}
.go {
  transform: rotate(360deg);
  transition: all .5s;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f4f4f9;
  color: #637280;
  border: 1px solid #dce0e6;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #637280;
}
//  左右按钮和数字小li
/deep/ .el-pagination.is-background .btn-next,
/deep/.el-pagination.is-background .btn-prev,
/deep/.el-pagination.is-background .el-pager li {
  background-color: #fff;
  height: 26px;
  color: #606266;
  border-radius: 4px;
  border: 1px solid #dce0e6;
  margin:0 3px;
  i{color: #C7CFDA;}
}
/deep/.el-pagination >.btn-prev{
  margin-left:0!important ;
}
/deep/ .el-pagination.is-background .el-pager li {
  line-height: 26px;
  font-size: 12px !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #637280 !important;
  background: #fff;
  vertical-align: middle;
}
// 下拉框样式
/deep/.el-pagination .el-select .el-input .el-input__inner {
  padding-right: 25px;
  height: 26px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dce0e6;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 4px;
  font-size: 12px;
  color: #637280;
}
// 跳转部分
/deep/.el-pagination__jump {
  color: #637280 !important;
  margin-right: 15px;
  font-size: 12px !important;
  margin-left: 14px
}
// 跳转输入框样式
/deep/.el-pagination__editor.el-input .el-input__inner {
  height: 26px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dce0e6;
  color: #637280;
  font-size: 12px;
  margin-right: 15px;
}
.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  font-size: 12px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  box-sizing: border-box;
}
/deep/.el-pagination__total {
  margin-right: 0;
  font-size: 12px !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #939eab;
}
/deep/.el-pagination__total::after {
  content: '\8bb0\5f55';// 使用unicode，避免显示乱码
}
/deep/.el-pagination .el-input__suffix {
    top: -2px;
}
/deep/.el-pagination__sizes{
  margin:0
}
</style>